<template>
  <el-dialog
   :title="form.id ? '修改标签' :'新增标签'"
    width="400px"
    :visible.sync ='visible'
    :before-close="handleClose"
  >
   <el-form ref="form" :model="form" :rules="rules" class="fram">
      <el-form-item label="所属学科" prop="subjectID" >
        <el-select class="hSelect" v-model="form.subjectID"  placeholder="请选择">
          <el-option  
          v-for="item in busiList" 
          :key="item.id" 
          :label="item.label" 
          :value="item.value"  />
        </el-select>
      </el-form-item>
      <el-form-item
        label="目录名称"
        prop="tagName"
      >
        <el-input 
        v-model="form.tagName" 
        class="hInput"  
        placeholder="请输入目录名称" 
        autocomplete="off"  />
      </el-form-item >

    </el-form>
    <el-row slot="footer" type="flex" justify="end" >
        <el-button  size="small" @click="handleClose">取消</el-button>
        <el-button type="primary" size="small"  @click="sure">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { add, update } from '@/api/hmmm/tags.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      form: {},
      busiList: [{
        label: '',
        value: ''
      }],
      subjectID: '', // 学科id
      params: {
        subjectID: '',
        tagName: ''
      },
      updateForm: {},
      rules:{
         subjectID:[{required: true, message: '你的学科',trigger: 'blur'}],
         tagName:[{required: true,message:'你的目录名',trigger: 'blur'}]
      }

    }
  },
  watch: {
    visible (val) {
      if (!val) {
        this.$refs.form.resetFields()
        this.params = {}
      } else {
        this.getValue()
      }
    }
  },
  methods: {
    //清空表单
    handleClose () {
      this.$emit('update:visible', false)
      this.$refs.form.resetFields()
      this.form = {}
      
    },
    
    //按钮的切换
    async sure () {
      await this.$refs.form.validate()
      this.form.id ? await update(this.form) : await add(this.form)
      console.log(this.form);
      this.$message.success(`${this.form.id ? '修改' : '新增'} 成功`)
      this.handleClose()
      this.$parent.getList()
      
    },
    //简单列表渲染
    async getValue () {
      const { data } = await simple()
      this.busiList = data
      console.log(data);
    }
  }
}

</script>

<style lang='scss' >
.hInput{
   width: 280px;
}
.hSelect{
   width: 280px; 
}
</style>
